import React, { Fragment, Component } from "react";
import {
  Text,
  View,
  ScrollView,
  Dimensions,
  Image,
  TouchableHighlight
} from "react-native";
var { height, width } = Dimensions.get("window");
class Shopper extends Component {
  constructor() {
    super();
    this.state = {};
  }
  render() {
    return (
      <Fragment>
        <ScrollView
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
        >
          <TouchableHighlight>
            <View
              style={{
                width: (1 / 3) * width,
                height: 150,
                alignItems: "center",
                flexDirection: "column",
                backgroundColor: "white",
                justifyContent: "center"
              }}
            >
              <Image
                source={require("../../images/wd.png")}
                style={{ width: 130, width: 130, resizeMode: "contain" }}
              />
              <Text style={{ position: "absolute", bottom: 10 }}>万达</Text>
            </View>
          </TouchableHighlight>
          <View
            style={{
              width: (1 / 3) * width,
              height: 150,
              alignItems: "center",
              flexDirection: "column",
              backgroundColor: "white",
              justifyContent: "center"
            }}
          >
            <Image
              source={require("../../images/wd.png")}
              style={{ width: 130, width: 130, resizeMode: "contain" }}
            />
            <Text style={{ position: "absolute", bottom: 10 }}>万达</Text>
          </View>
          <View
            style={{
              width: (1 / 3) * width,
              height: 150,
              alignItems: "center",
              flexDirection: "column",
              backgroundColor: "white",
              justifyContent: "center"
            }}
          >
            <Image
              source={require("../../images/wd.png")}
              style={{ width: 130, width: 130, resizeMode: "contain" }}
            />
            <Text style={{ position: "absolute", bottom: 10 }}>万达</Text>
          </View>
          <View
            style={{
              width: (1 / 3) * width,
              height: 150,
              alignItems: "center",
              flexDirection: "column",
              backgroundColor: "white",
              justifyContent: "center"
            }}
          >
            <Image
              source={require("../../images/wd.png")}
              style={{ width: 130, width: 130, resizeMode: "contain" }}
            />
            <Text style={{ position: "absolute", bottom: 10 }}>万达</Text>
          </View>
          <View
            style={{
              width: (1 / 3) * width,
              height: 150,
              alignItems: "center",
              flexDirection: "column",
              backgroundColor: "white",
              justifyContent: "center"
            }}
          >
            <Image
              source={require("../../images/wd.png")}
              style={{ width: 130, width: 130, resizeMode: "contain" }}
            />
            <Text style={{ position: "absolute", bottom: 10 }}>万达</Text>
          </View>
        </ScrollView>
      </Fragment>
    );
  }
}
export default Shopper;
